<template>
<!-- 维护页面头部需维护总数/已完成总数组件 -->
  <div class="totalTile">
    <div class="rightText">
      <div class="textBox">
        <slot name="time"></slot>
      </div>
    </div>
    <div class="leftText">
      <div class="topUnfinish"><i></i><slot name="unfinished"></slot></div>
      <div class="botFinish"><i></i><slot name="finished"></slot></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang='less' scoped>
.totalTile {
  width: 100%;
  height: 9rem;
  border-bottom: 0.26rem solid #11101e;
  display: flex;
  .rightText {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .textBox {
      width: 3.2rem;
      height: 3.6rem;
      background-color: #0769b2;
      border-radius: 0.4rem;
      text-align: center;
      line-height: 3.6rem;
    }
  }
  .leftText {
    flex: 5;
    display: flex;
    flex-direction: column;
    .topUnfinish {
      flex: 1.3;
      display: flex;
      align-items: center;
      font-size: 1.6rem;
      i {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background-color: #ff977a;
        box-shadow: 0 0 0.5rem rgba(245, 210, 200, 0.4);
        display: inline-block;
        margin: 0 1rem;
      }
    }
    .botFinish {
      flex: 1;
      display: flex;

      font-size: 1.6rem;
      i {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background-color: #00ff01;
        box-shadow: 0 0 0.5rem rgba(187, 255, 187, 0.5);

        display: inline-block;
        margin: 0 1rem;
      }
    }
  }
}
</style>